<template>
  <div>
    <el-dialog title="新增候选受试者" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="closeDialog"
               v-on:open="loadData" style="margin-top: -100px;" size="large">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="7">
              <div class="cardIdContent" style="">
                <table>
                  <tr>
                    <td class="id-class" width="50px">姓 名</td>
                    <td colspan="2"><strong>{{form.name}}</strong></td>
                    <td rowspan="4" style="padding:20px 20px 0px 0px;">
                      <img :src="'data:image/jpg;base64,' + form.avator" width="110px"/>
                    </td>
                  </tr>
                  <tr>
                    <td class="id-class">性 别</td>
                    <td><strong>{{form.sex}}</strong>
                      <span class="id-class" style="margin-left:20px;">民 族</span>
                      <strong>{{form.nation}}</strong>
                    </td>
                  </tr>
                  <tr>
                    <td class="id-class">出 生</td>
                    <td colspan="2">
                      <strong>
                        {{form.birthday.substring(0,4)}}<span
                        class="id-class-1">年</span>{{form.birthday.substring(4,6)}}<span class="id-class-1">月</span>{{form.birthday.substring(6)}}<span
                        class="id-class-1">日</span>
                      </strong>
                    </td>
                  </tr>
                  <tr>
                    <td class="id-class" style="vertical-align:top;"> 地 址</td>
                    <td colspan="2" style="vertical-align:top;font-weight:bold; ">{{form.address}}</td>
                  </tr>
                  <!--<tr>
                    <td colspan="100%" align="center">
                      <strong>{{form.IDIssued}}</strong>
                    </td>
                  </tr>-->
                  <tr>
                    <td colspan="100%">
                      <span class="id-class">公民身份号码</span>
                      <strong style="padding-left:20px;">{{form.cardid}}</strong></td>
                  </tr>
                  <tr>
                    <td colspan="100%">
                      <span class="id-class">有效日期</span>
                      <strong style="padding-left:50px;" v-show="form.issuedData!=undefined&&form.issuedData!=''">{{form.issuedData.substring(0,4)}}.{{form.issuedData.substring(4,6)}}.{{form.issuedData.substring(6)}}
                        -
                        {{form.validDate.substring(0,4)}}.{{form.validDate.substring(4,6)}}.{{form.validDate.substring(6)}}</strong>
                    </td>
                  </tr>
                </table>
              </div>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card" style="text-align: center; height: 242px">
                <div slot="header" class="clearfix">核验人证是否一致</div>
                <div style="text-align: center;padding:2px;">
                  <el-row>
                    <el-col :span="10">
                      <video id="video" height="150px" autoplay width="200px"></video>
                    </el-col>
                    <el-col :span="8">
                      <canvas id="canvas" v-show="photo" style="width:200px;height:150px;"></canvas>
                      <img src="/static/img/man.png" v-show="photo==false" width="150" height="150">

                    </el-col>
                    <div class="time-graph">
                      <div class="premzery">
                        人脸匹配度：
                      </div>
                      <div class="face_steat">
                        <img v-show="matchResult" src="../../../../static/img/right.png" width="30px" height="30px"/>
                        <img v-show="matchResulf" src="../../../../static/img/wrong.png" width="30px" height="30px"/>
                      </div>

                      <!--<canvas id="time-graph-canvas"  width="300" height="300">-->

                      <!--</canvas>-->
                    </div>
                  </el-row>
                  <el-button type="primary" size="small" @click="matchSubjectFace" :disabled="matchFaceClick">点击核验
                  </el-button>
                </div>
              </el-card>
            </el-col>

            <div class="faceBox_is">
              <div class="face_title">
                历史照片
              </div>
              <div class="boxBface">
                <img :src="faceImggs"  alt="" id="faceImg">
              </div>


            </div>

            <!--<el-col :span="4" style="padding-left:5px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">核验指纹</div>
                <div style="height:185px;text-align: center;">
                  <el-select v-model="form.finger" placeholder="请选择手指">
                    <el-option
                      v-for="item in fingerList"
                      :label="item.name"
                      :value="item.val">
                    </el-option>
                  </el-select>
                  <br>
                  <br>
                  <el-button type="primary" size="small" @click="readFinger">核验指纹</el-button>
                  <br>
                  <br>
                  <img :src="form.fingerImg!=undefined&&form.fingerImg!=''?form.fingerImg:'/static/img/finger.png'"
                       width="88px" height="88px" prop="fingerImg">
                </div>
              </el-card>
            </el-col>-->






          </el-row>
          <div v-if="days!=undefined&&days!=-1" style="font-weight: bold;font-size:1.2rem;text-align: center;margin-top: 10px;">
            该筛选者距上次参加试验时间为{{days}}天！上次通过筛选时间为是{{passTime}}{{lastFlupDate?'，最后随访日期是'+lastFlupDate:''}}。<span v-if="days<=timeInterval" style="color:#78c5a5">距离今天不足项目要求{{timeInterval}}天。</span>
          </div>
          <div v-if="status_is==1"style="font-weight: bold;font-size:1.2rem;text-align: center;margin-top: 7px;color:#78c5a5;">
            该筛选者试验正在进行中……
          </div>

          <el-row style="margin-top: 10px">
            <!---->
            <el-col :span="4" style="padding-left:5px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">筛选历史汇总</div>
                <div style="height:220px;">
                  <el-form>
                    <el-form-item label="筛选成功次数">
                      <b>{{filterRecord.sucCount}}</b>
                    </el-form-item>
                    <el-form-item label="筛选失败次数">
                      <b>{{filterRecord.failCount}}</b>
                    </el-form-item>
                    <el-form-item label="依从性平均分">
                      <b>{{filterRecord.score}}</b>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </el-col>
            <!---->
            <el-col :span="8" style="">

              <el-card>
                <div slot="header" class="clearfix">参与项目列表</div>
                <el-table stripe
                          element-loading-text="数据加载中"
                          style="width:100%"
                          :data="projectList" :height="220"
                          border>
                  <el-table-column
                    label="项目"
                    property="projectName">
                  </el-table-column>
                  <el-table-column
                    label="依从性评分"
                    property="complianceScore">
                  </el-table-column>
                  <el-table-column
                    label="参与时间"
                    inline-template>
                    <template>
                      {{row.passTime.substring(0,10)}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    inline-template
                  >
                    <template>
                      <el-button type="text" @click="openSubjectsView(row)">查看详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="10" style="">

              <el-card class="box-card" style="">
                <div slot="header" class="clearfix">个人信息</div>
                <el-form :model="form" :inline="true" :rules="rules" ref="form"  class="demo-form" style="height: 220px">
                  <!-- <el-form-item label="筛选号：" prop="num">
                    <el-input v-model="form.num" style="width:150px;" :required="true"
                              :maxlength="$parent.filterNumLength"></el-input>
                  </el-form-item> -->
                  <el-form-item label="招募日期：" prop="recruitDate">
                    <el-date-picker
                      v-model="form.recruitDate"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions0"
                      style="width:150px;">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="受试者首字母缩写：" prop="name" v-if="false">
                    <el-input v-model="form.name" style="width: 150px;"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话：" prop="mobile">
                    <el-input v-model="form.mobile" style="width: 150px;"></el-input>
                  </el-form-item>
                 <!--  <el-form-item label="身高(cm)：" 
                        prop="height"
                        :rules="[
                        { required: true, message: '身高不能为空'},
                        { type: 'number', message: '身高必须为数字值'}
                      ]"
                  >
                    <el-input v-model.number="form.height" type="age" style="width: 150px;" @change='BIMalgorithm' auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="体重(kg)：" prop="weight"
                  :rules="[
                        { required: true, message: '体重不能为空'},
                        { type: 'number', message: '体重必须为数字值'}
                      ]"
                  >
                    <el-input v-model.number="form.weight" type="age" style="width: 150px;" @change='BIMalgorithm'></el-input>
                  </el-form-item> -->
                  <!-- <el-form-item label="BMI指数：" >
                  {{form.bmi}}
                  </el-form-item> -->
                  <el-row>
                    <!-- <el-col :span="6">
                      <div style="color:#78c5a5;">"*"为必填项。</div>
                    </el-col> -->
                  </el-row>
                </el-form>

              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding:10px;">
          <div class="pull-left red">
            {{errMsg}}
          </div>
          <div class="pull-right">
            <!-- <el-button @click.native.prevent="printIDcard">打印身份证条码</el-button> -->
            <el-button v-if="$utils.ckUIPower('S01010101')&&(days>timeInterval||days==-1)&&(status_is!=1)" type="primary"@click.native.prevent="handleSubmit(currentProjectId)" :disabled="editClick">保存
            </el-button>
            <!--<el-button v-if="$utils.ckUIPower('S01010101')" @click.native.prevent="handleReset">重置-->
            <!--</el-button>-->
            <el-button @click.native.prevent="closeDialog">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <view-subjects-dialog :dailogView="dailogSubView" :id="subjectId"></view-subjects-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  import ViewSubjectsDialog from "./viewSubjects.dialog.vue"
  import constants from '../../../commons/constants'

  var model = {
    num: '',
    avator: '',
    status: 0,
    oper: '',
    sex: '',
    recruitDate: new Date(),
    mobile: '',
    address: '',
    urgentContact: '',
    urgentMobile: '',
    fingerprint: '',
    finger: '左手拇指',
    name: '',
    cardid: '',
    subjectsNum: '',
    randomNum: '',
    nopassRemark: '',
    candidateResult: 0,
    projectId: '',
    age: '',
    hospitalStatus: 0,
    siteId: '',
    fingerImg: '',
    nation: '',
    birthday: '',
    validDate: '',
    issuedData: '',
    status_is:''
  };
  var fingerUrl = 'https://127.0.0.1:22002/zkbioonline/fingerprint';
  export default {
    data() {
      return {
        awaysToRead:null,
        editClick:false,
        faceImggs:'/static/img/ple.jpg',
        currentProjectId: this.$utils.getCurrenrProject().id,
        timeInterval: this.$utils.getCurrenrProject().timeInterval,
        server: constants.server,
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        title: '添加筛选者信息',
        form: Object.assign({
          age:''
        }, model),
        rules: {
          name: [
            {required: false, message: '必填', trigger: 'blur'},
          ],
          recruitDate: [
            {required: false, message: '请选择日期'},
          ],
          urgentContact: [
            {required: false, message: '必填'},
          ],
          urgentMobile: [
            {required: false, message: '必填'},
          ],
          mobile: [
            {required: false, message: '必填'},
          ],
          finger: [
            {required: true, message: '请选择录入的手指'}
          ],
        },
        fingerList: [{name: '左手拇指', val: '左手拇指'}, {name: '右手拇指', val: '右手拇指'}],
        addBtnTxt: '',
        projectList: null,
        filterRecord: {},
        validType: 'face',//'face' 'finger'
        mediaStream: null,
        video: null,//设备摄像头
        photo: false,
        matchFaceClick: false,
        face: '',
        //对应身份证里的指纹
        finger1: '',
        finger2: '',
        lastFlupDate: null,
        days:-1,
        passTime: null,
        errMsg: '',
        dailogSubView: false,
        subjectId:null
      }
    },
    components: {
      ViewSubjectsDialog
    },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      dialogVisible: {
        get: function () {
          return this.dialogFormVisible
        },
        set: function () {
        }
      }
    },
    methods: {
      computeAge() {
        var vm = this;
        var strYear = vm.form.birthday;
        var nowData = new Date().getFullYear();
        var cardYear = strYear.substring(0, 4);
        var nowAge = nowData - cardYear;
        vm.form.age = nowAge;
      },
      //BMI指数计算
      BIMalgorithm(){
        var vm=this;
        // vm.BMI=vm.from.weight/(vm.from.height*vm.from.height);
        if(vm.form.weight!=''&&vm.form.height!=''){
          if(vm.form.weight!=null&&vm.form.height!=null){
              let tsheight=vm.form.height/100;
              let Bim=vm.form.weight/(tsheight*tsheight);
              vm.form.bmi=Bim.toFixed(2);
          }
          
          // console.log(vm.form.BMI)
        }else{
          vm.form.bmi='';
        }
        
      },
      valideFinger() {
        var vm = this;
        http.postData(vm, '/lib/finger/valide', {fingerTemplate: vm.form.fingerprint}, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.$message.success({title: '指纹核验提示', msg: ret.msg});
          } else {
            vm.$message.error({title: '指纹核验提示', msg: ret.msg});
          }
        });
      },
      readFinger() {
        var vm = this;
        var base64Head = 'data:image/jpg;base64,';
        vm.form.fingerImg = "";

        http.getDataFullURL(vm, fingerUrl + '/beginCapture?type=2', function (resp) {
          var data = resp.bodyText;
          data = JSON.parse(data);
          if (data.ret == 0) {
            vm.$message.success({title: '操作成功', message: "请按压手指"});
            //获取指纹图片
            setTimeout(function () {
              http.getDataFullURL(vm, fingerUrl + '/getImage', function (resp) {
                var data = resp.bodyText;
                data = JSON.parse(data);
                if (data.ret == 0) {
                  var fingerImg_ = data.data.jpg_base64;
                  vm.form.fingerImg = base64Head + fingerImg_;
                  //获取指纹模板
                  setTimeout(function () {
                    http.getDataFullURL(vm, fingerUrl + '/getTemplate', function (resp) {
                      var data = resp.bodyText;
                      data = JSON.parse(data);
                      if (data.ret == 0) {
                        vm.form.fingerprint = data.data.template;
                        //核对身份证里的指纹图片
                        if (vm.finger1 != undefined && vm.finger1 != '' && false) {
                          //先核验finger1
                          http.postDataFullURL(vm, fingerUrl + '/verify', {
                            'ver': vm.form.fingerprint,
                            'reg': vm.finger1
                          }, function (resp_1) {
                            var data_ = resp_1.bodyText;
                            data_ = JSON.parse(data_);
                            if (data_.ret == 0) {
                              if (data_.score > 90) {//验证通过
                                vm.$message.success({title: '指纹核验', message: "指纹与身份证匹配一致！"});
                              } else {
                                alert(2);
                                //验证失败后再验证第二张指纹图片finger2
                                http.postDataFullURL(vm, fingerUrl + '/verify', {
                                  'ver': vm.form.fingerprint,
                                  'reg': vm.finger2
                                }, function (resp_2) {
                                  var data_2 = resp_2.bodyText;
                                  console.log("data_2\t" + data_2);
                                  data_2 = JSON.parse(data_2);
                                  if (data_2.ret == 0) {
                                    if (data_2.score > 90) {//验证通过
                                      vm.$message.success({title: '指纹核验', message: "指纹与身份证匹配一致！"});
                                    } else {
                                      //两个指纹核对失败后进行指纹库匹配
                                      vm.valideFinger();
                                    }
                                  }
                                });
                              }
                            } else {
                              vm.errMsg = "指纹与身份证不匹配！";
                              vm.$message.error({title: '指纹核验', message: vm.errMsg});
                            }
                          });
                        } else {//如果身份证里没有指纹 需要核对指纹库
                          vm.valideFinger();
                        }
                      }
                    });
                  }, 100);
                  if (vm.form.template != '' && vm.form.fingerImg != '') {
                    vm.$message.success({title: '操作成功', message: "指纹信息采集成功"});
                  } else {
                    vm.$message.error({title: '操作失败', message: "请重新按压手指"})
                  }
                }
              })
            }, 3000);
          } else if (data.ret != 0) {
            vm.$message.error({title: '操作失败', message: "获取二代身份证信息失败，请重试!"});
          }
        }, function (err) {
          vm.$message.error({title: '操作失败', message: "获取身份证设备失败，请检查是否连接正确！"});
        });
      },
      readID() {
        var vm = this;
        // var thatcanvas= document.getElementById("time-graph-canvas");

        // vm.drawMain(thatcanvas,0, "#eef1f6", "#eef1f6");
        http.getDataFullURL(vm, 'http://127.0.0.1:24010/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1', function (resp) {
          var data = resp.bodyText;
          /**
           * 替换'\\',避免JSON解析异常
           */
          data = data.replace(/\\*/g, "");
          data = JSON.parse(data);
          if (data.ret == 0) {
//            vm.$message.success({title: '操作成功', message: "信息读取成功！"});
            window.clearInterval(vm.awaysToRead);
            vm.form.sex = data.Certificate.Sex;
            vm.form.cardid = data.Certificate.IDNumber;
            vm.form.address = data.Certificate.Address;
            vm.form.nation = data.Certificate.Nation;
            vm.form.name = data.Certificate.Name;
            vm.form.birthday = data.Certificate.Birthday;
            vm.form.validDate = data.Certificate.ValidDate;
            vm.form.issuedData = data.Certificate.IssuedData;
            vm.form.IDIssued = data.Certificate.IDIssued;//公安局
            vm.form.avator = data.Certificate.Base64Photo; //用户头像
            vm.finger1 = data.Certificate.fp_feature1;
            vm.finger2 = data.Certificate.fp_feature2;
            vm.computeAge();
            //获取当前身份证号对应的记录
            http.postData(vm, "/pt/candidateSubjects/findJoinProjectList/", {
              projectId: vm.currentProjectId,
              cardId: vm.form.cardid
            }, function (resp_) {
              // console.log(resp_.body.value.info.face);
              let faceImgs= document.getElementById("faceImg");
              faceImgs.src=resp_.body.value.info.face;
              console.log(resp_.body.value.test_status)
              vm.status_is=resp_.body.value.test_status;
              var ret = resp_.body;
              if (ret.code == '111') {
                vm.projectList = ret.value.projectList;
                if (ret.value.filterRecord != undefined)
                  vm.filterRecord = ret.value.filterRecord;
                var info = ret.value.info;
                if (info != undefined) {
                  vm.form.mobile = info.mobile;
                  vm.form.urgentContact = info.urgentContact;
                  vm.form.urgentMobile = info.urgentMobile;
                }
                //计算距离天数 有小数也为一天
                if (ret.value.passTime != undefined && ret.value.passTime != null) {
                  vm.passTime = ret.value.passTime;
//                  vm.days = Math.ceil((new Date() - new Date(ret.value.lastFlupDate)) / (3600000 * 24));//有小数进一
                  vm.lastFlupDate = ret.value.lastFlupDate;
                  if(ret.value.lastFlupDate!=undefined&&ret.value.lastFlupDate!=undefined!=null) {
                    vm.days = parseInt((new Date() - new Date(ret.value.lastFlupDate)) / (3600000 * 24));//取整数
                  }else {
                    vm.days = parseInt((new Date() - new Date(ret.value.passTime)) / (3600000 * 24));//取整数
                  }
                }else{
                  vm.days =-1;
                }
              } else {
                vm.$message.error({title: '提示', message: ret.msg});
              }
            });
          } else if (data.ret != 0) {
//            vm.$message.error({title: '操作失败，请检查', message: "获取二代身份证信息失败，请重试"});
          }
        }, function (err) {
          vm.$message.error({title: '连接设备错误', message: "连接身份证设备异常，请检查！"});
        });
      },
        openVideo() {
        var vm = this;
        vm.video = vm.$el.querySelector("#video");
        var canvas = vm.$el.querySelector("#canvas");
        vm.context = canvas.getContext("2d");
          var vendorUrl = window.URL || window.webkitURL;
        //获取摄像头对象
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        navigator.getUserMedia({
          video: true    // 控制视频设备
//          audio: true  // 控制音频设备
        }, gotStream, noStream); //打开摄像头
        //成功打开摄像头
        function gotStream(stream) {
          console.log(vendorUrl.createObjectURL(stream))
          vm.mediaStream = stream;
          vm.video.src = vendorUrl.createObjectURL(stream);
          video.play();
          vm.video.onerror = function () {
            stream.stop();
          }
          stream.onended = noStream;
          vm.video.onloadedmetadata = function () {
//            alert("成功打开摄像头")
          };
        }

        //打开摄像头失败
        function noStream(error) {
          console.log(error);
//          vm.$message.error({message: '开启摄像头异常！'});
          vm.errMsg = "开启摄像头异常！";
        }
      },
      //人脸比对
      matchSubjectFace(oldImg, newImg) {
        this.context.drawImage(video, 0, 0, 300, 150);
        // 获取base64位格式的图片
        this.face = canvas.toDataURL();
        this.photo = true;
        var vm = this;
        vm.matchFaceClick = true;
        http.postData(vm, '/lib/face/match2Img/1', {"img1": this.form.avator, "img2": this.face,"cardid" : this.form.cardid}, function (resp) {
          var ret = resp.body;
          // if (ret.code == 111) {
          //   vm.$message.success({message: ret.msg});
          //
          // } else {
          //   vm.$message.error({message: ret.msg});
          // }
          /**/
          var gressbartexts=document.getElementsByClassName("gressbartext");
          gressbartexts.innerHTML=ret.msg;
          // var thatcanvas= document.getElementById("time-graph-canvas");

          console.log(ret);

          if(ret.msg=="相似"){
            vm.$message.success({message: ret.msg});
            vm.matchResult = true;
            vm.matchResulf = false;

          }else{
            vm.$message.error({message: ret.msg});
            vm.matchResulf = true;
            vm.matchResult = false;

          }




          console.log(ret.value,ret.msg,gressbartexts)

          /**/
          vm.matchFaceClick = false;
        });
      },
      //打印身份证条码
      printIDcard(){
        var vm= this;
        console.log(vm.form.cardid)
          var printHtml = "<button onclick='this.style.display=\"none\";window.print();window.close();' style='font-size: 1.3rem;color: white;background-color:red;'>请确认条码完全加载后再点击打印</button>" +
              "<ul class=\"tagList\">\n";
            // if(list != undefined && list !=null){
            //   printHtml +=
            //     "<li class='isLi'>\n" +
            //     "     <img class='isImg' src=\"" + vm.server + "/createBarCode/Z" + row.id + "\">" +
            //     // "     <div>SubjectId:" + vm.subjectNum + "</div>\n" +
            //     "     <div class='isdiv'>" + list.name+"&nbsp;&nbsp;"+list.num+"</div>" +
            //      // "     <div class='isdiv'>" + subjectInfo.name+"," + subjectInfo.sex+"，" + subjectInfo.age+"岁<br>其他："+ vm.projectNum+"</div>" +
            //     // "     <div>" + vm.projectNum+"</div>\n" +
            //     "</li>\n";
            // }
            if(vm.form.cardid!=undefined&&vm.form.cardid!=null&&vm.form.cardid.length>0) {
              
                
                printHtml +=
                  "<li>\n" +
                  "     <img src=\"" + vm.server + "/createBarCode/I"+vm.form.cardid+"\">\n" +
                  // "     <div>SubjectId:"+vm.subjectNum+"</div>\n" +
                  "     <div>"+vm.form.name+"</div>\n" +
                  // +(item.pkTime!=undefined&&item.pkTime!=null&&item.pkTime!=''?('PKTime:'+item.pkTime+'&nbsp;'):'')
                  // "     <div>"+item.name+vm.projectNum+"</div>" +
                  // "     <div>"+vm.projectNum+"</div>\n" +
                  "</li>\n";
              
            }
            printHtml+="</ul><style>\n" +
                " body{padding:0px;} " +
                // " .isImg{float:left;margin-right:3mm;} " +
                // " .isdiv{float:left;margin-top:2mm;} " +
                // " .tagList .isLi{width:140mm;} " +
                ".tagList li * {font-size:0.2rem;padding:0px;}\n" +
                "  .tagList li {list-style: none;width:30mm;height:15mm;margin-left:-10mm;word-break: normal;padding:0.1mm;text-align:center;font-size:8px;}\n" +
                "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                "@media screen {"+
                "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                "  }" +
                "  @media print {\n" +
                "    .tagList li {\n" +
                "      width: 40mm;\n" +
                "      height:20mm;\n" +
                "      page-break-after:always;\n" +
                "      word-break: normal;" +
                "      padding:0.1mm;" +
                "      text-align:center;" +
                "    }\n" +
                "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                "  }</style>";
                if(vm.form.cardid!=undefined&&vm.form.cardid!=null&&vm.form.cardid.length>0){
                  var wid = window.open('blank', '_blank', 'width=100px');
              wid.document.write(printHtml);  
                }else{
                 vm.$message.error('身份证未识别');
                }
              
      },
      handleReset() {
        this.editClick = false;
        this.$refs.form.resetFields()
      },
      handleSubmit(currentProjectId) {
        var vm = this;

        if (vm.form.cardid == '' || vm.form.cardid == undefined) {
          vm.$notify.error({title: '操作失败', message: '请采集身份信息！', type: 'error'});
          return false;
        }
//        if (vm.form.fingerImg == '' || vm.form.fingerImg == undefined) {
//          vm.$notify.error({title: '操作失败', message: '请采集指纹信息！', type: 'error'});
//          return false;
//        }
        if (vm.form.num.length > vm.$parent.filterNumLength) {
          vm.$notify.error({title: '操作失败', message: '筛选号长度应为' + vm.$parent.filterNumLength + '位'});
          return false;
        }
        this.$refs.form.validate(function (valid) {
          if (valid) {
            vm.form.projectId = vm.currentProjectId;
            vm.editClick = true;
            http.postData(vm, "/pt/candidateSubjects/save", {
              json: JSON.stringify(vm.form),
              face: vm.face
            }, function (resp) {
              var ret = resp.body;
              if (ret.code === '111') {
                vm.$notify({title: '操作提示', message: ret.msg, type: 'success'});
                vm.printIDcard();
                vm.form = Object.assign({}, model);
                vm.closeDialog();
                vm.$parent.onSubmit();
              } else {
                vm.editClick = false;
                vm.$notify.error({title: '操作失败', message: ret.msg});
              }
            });
          } else {
            return false
          }
        })
      },
      closeDialog() {
        this.$emit('closeDialog');
        this.matchResult = false;
        this.matchResulf=false;
        if (this.mediaStream)
          this.mediaStream.getVideoTracks()[0].stop();
        this.faceImggs='/static/img/ple.jpg';
        this.errMsg = "";
        this.form = Object.assign({}, model);
        this.face = "";
        this.photo = false;
        this.matchFaceClick = false;
        this.finger1 = '';
        this.finger2 = '';
        this.projectList = null;
        this.filterRecord = {};
        this.editClick = false;
      },
      openSubjectsView(subj) {
        this.dailogSubView = true;
        this.subjectId=subj.id;
      },
      closeSubjectsView() {
        this.dailogSubView = false;
        this.subjectId=null;
      },
      loadData() {
        var vm = this;
        //  页面打开后触发调用摄像头的方法
        setTimeout(function () {
          vm.openVideo();
        }, 300);
        vm.photo = false;
        vm.rules.num = [
          {required: false, message: '请输入筛选号', trigger: 'blur'}
          // , {
          //   validator: function (rule, value, callback) {
          //     if (value == undefined || value == '' || value.length != vm.$parent.filterNumLength) {
          //       callback(new Error());
          //     } else {
          //       callback();
          //     }
          //   }, message: '不符合' + vm.$parent.filterNumLength + '个字符限制', trigger: 'blur'
          // }
        ];
        vm.$parent.loadData(function (ret) {
          if (ret != undefined) {
            vm.form = ret;
          } else {
            vm.form = Object.assign({}, model);
          }
        });
          //  页面打开后触发读取身份证信息方法
          vm.awaysToRead = setInterval(function () {
            vm.readID();
          },2000);
      },
      drawMain(drawing_elem, percent, forecolor, bgcolor) {
        /*
            @drawing_elem: 绘制对象
            @percent：绘制圆环百分比, 范围[0, 100]
            @forecolor: 绘制圆环的前景色，颜色代码
            @bgcolor: 绘制圆环的背景色，颜色代码
        */
        var context = drawing_elem.getContext("2d");
        var center_x = drawing_elem.width / 2;
        var center_y = drawing_elem.height / 2;
        var rad = Math.PI*2/100;
        var speed = 0;

        // 绘制背景圆圈
        function backgroundCircle(){
          context.save();
          context.beginPath();
          context.lineWidth = 8; //设置线宽
          var radius = center_x - context.lineWidth;
          context.lineCap = "round";
          context.strokeStyle = bgcolor;
          context.arc(center_x, center_y, radius, 0, Math.PI*2, false);
          context.stroke();
          context.closePath();
          context.restore();
        }

        //绘制运动圆环
        function foregroundCircle(n){
          context.save();
          context.strokeStyle = forecolor;
          context.lineWidth = 8;
          context.lineCap = "round";
          var radius = center_x - context.lineWidth;
          context.beginPath();
          context.arc(center_x, center_y, radius , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
          context.stroke();
          context.closePath();
          context.restore();
        }

        //绘制文字
        function text(n){
          context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
          context.fillStyle = forecolor;
          var font_size = 40;
          context.font = font_size + "px Helvetica";
          var text_width = context.measureText(n.toFixed(0)+"%").width;
          context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
          context.restore();
        }

        //执行动画
        (function drawFrame(){
          window.requestAnimationFrame(drawFrame);
          context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
          backgroundCircle();
          text(speed);
          foregroundCircle(speed);
          if(speed >= percent) return;
          speed += 1;
        }());
      }
    }
  }
</script>
<style>
  .cardIdContent {
    width: 384px;
    height: 242px;
    margin: 0 auto;
    background: url('/static/img/card_bg.png') no-repeat;
  }

  .cardIdContent table {
    width: 384px;
    height: 220px;
  }

  .cardIdContent table td {
    vertical-align: middle;
  }

  .cardIdContent .id-class {
    color: #2588b2;
    padding-left: 20px;
  }

  .cardIdContent .id-class-1 {
    color: #2588b2;
    padding-left: 5px;
    padding-right: 5px;
  }
  .el-dialog__header{
    background-color: #78c5a5;

    padding:10px 20px ;
  }
  .el-dialog__title{
    color:#fff;
  }
  .time-graph {

    display:flex;
    flex-direction: column;
    display:-webkit-flex;
    justify-content: center;
    align-items: center;

  }
  #time-graph-canvas{
      width: 100px;
      height: 100px;
    margin-top: 15px;

    }
.el-card__header{
  background-color: #78c5a5;
  color:#fff;
  font-weight: normal;
  padding: 5px 10px;
}
.boxBface{


}
.faceBox_is{
  margin-left: 20px;
  float: left;

  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  margin-top: 2px;

}
  .faceBox_is img{
   width: 200px;
    border-radius: 0 0  5px 5px;
    height: 150px;
  }
  .boxBface{
    padding: 30px 15px 10px 15px;
  }
  .face_title{
    border-radius: 5px 5px 0 0 ;
    background-color: #78c5a5;
    color: #fff;
    padding: 5px 10px;
    font-size: 1.2rem;
  }
  .premzery{
    color:#78c5a5;
    float:left;
    text-align: center;
  }
  .face_steat{
    text-align: center;
    padding:20px 0;
  }
  .el-form-item__label{
    width: 100px;
    text-align: left;
    padding: 11px 0 11px 0;
  }
  .el-row{
    display: flex;
    justify-content: space-between;
  }
</style>
